@import "../../../css/global";

$margin: 0.6rem;
$input-height: 0.96rem;
$input-font-size: 0.26rem;
$input-color: #666666;
$input-border: solid 0.02rem #F0F0F0;
.logo {
  height: 3.26rem;
  padding: 0.74rem $margin 0 $margin;
  background: $red;
  img {
    width: 0.76rem;
    height: 0.76rem;
    margin-right: .16rem;
  }
  span {
    font-size: 0.56rem;
    font-weight: lighter;
  }

  .nav {
    height: 0.74rem;
    color: $white;
    font-size: $input-font-size;
    div {
      width: 1.04rem;
      height: 0.32rem;
      padding: 0 0.20rem 0.20rem 0.20rem;
      font-size: 0.32rem;
      font-weight: lighter;
      &.active {
        border-bottom: 0.04rem solid $white;
        font-weight: bolder;
      }
    }
  }
}

.form {
  background: white;
  padding: 0 $margin;
  .telephone, .password {
    width: 100%;
    input {
      width: 100%;
      height: $input-height;
      font-size: $input-font-size;
      color: $input-color;
      border-bottom: $input-border;
    }
  }
  .remember {
    width: 100%;
    height: 1.46rem;
    font-size: $input-font-size;
    .checkbox {
      width: .36rem;
      height: .36rem;
      background: url("../../../img/Ico_check_radio_button_unchecked.png") center no-repeat;
      background-size: contain;
      &.selected {
        background: url("../../../img/Ico_fettle_proper.png") center no-repeat;
        background-size: contain;
      }
      input {
        display: none;
      }
    }
    span {
      margin: 0.3rem 0;
      display: inline;
      color: $input-color;
    }
  }
  .login {
    width: 6.30rem;
    height: 0.88rem;
    margin: 0.3rem 0;
    background: $red;
    border-radius: 0.44rem;
    font-size: 0.34rem;
    color: rgba(255, 255, 255, 1);
    line-height: 0.34rem;
  }
  .wxLogin, .qqLogin, .alLogin {
    width: 6.30rem;
    height: 0.88rem;
    margin: 0.3rem 0;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.44rem;
    border: .01rem solid rgba(0, 0, 0, 0.2);
    img {
      width: .48rem;
      height: .48rem;
      margin-right: .36rem;
    }
    span {
      width: 2rem;
      height: .48rem;
      font-size: 0.34rem;
      color: rgba(153, 153, 153, 1);
      line-height: 0.34rem;
    }
  }
}

.loginBar {
  display: flex;
  div {
    font-size: .26rem;
    color: rgba(153, 153, 153, 1);
  }
  .line {
    margin: .2rem;
    width: 1.5rem;
    height: .02rem;
    background: rgba(153, 153, 153, 1);
  }
  span {
    margin-top: .1rem;
    font-size: .26rem;
    color: rgba(153, 153, 153, 1);
  }
  .mui-icon-weixin {
    width: .8rem;
    height: .8rem;
    background: url('../../../img/wx.png') center no-repeat;
    background-size: contain;
  }
  .mui-icon-pengyouquan {
    width: .8rem;
    height: .8rem;
    background: url('../../../img/pyq.png') center no-repeat;
    background-size: contain;
  }
  .mui-icon-qq {
    width: .8rem;
    height: .8rem;
    background: url('../../../img/qq.png') center no-repeat;
    background-size: contain;
  }
}